<template>
  <div class="three">
      <div class="three-nav">
      <div class="three-nav-L">
         <router-link to="/learning/xuexi/course11"> <span>我的课程</span></router-link>
           <router-link to="/learning/xuexi/course12"><span>我的专栏</span></router-link>
      </div>
    <div class="three-nav-R">
    <div class="three-nav-R">
          <van-dropdown-menu  overlay="ture" active-color="red" duration="0.01">
            <van-dropdown-item v-model="value1" :options="option1" />
          </van-dropdown-menu>

    </div>
    </div>
      </div>
    
  </div>
</template>

<script>
export default {
data() {
    return {
      value1: 0,
      option1: [
        { text: '全部', value: 0 },
        { text: '免费课', value: 1 },
        { text: '实战课', value: 2 },
         { text: '体系课', value: 3 },
        { text: '微课', value: 4 },
      ],
    };
  },
}
</script>

<style scoped>
.three{
    width: 100%;
    height: 0.6rem;
        margin-top: 0.1rem;
    
}
.three-nav{
    width: 3.47rem;
    height: 0.6rem;
    background-color: #fff;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* flex-wrap: wrap; */
    
}
.three-nav .three-nav-R{
  display: flex;
  /* margin-top: 1rem; */
}
.three-nav .three-nav-L span{
  margin-right: 0.2rem;
}
.three-nav .three-nav-R span{
     margin-right: 0.1rem;
     /* margin-left: 1.5rem; */
}
.van-popup{
  border: 0.01rem;
  width: 0.5rem;
  height: 1rem;
  background-color: #fff;
  margin-top: 1rem;
}
.van-dropdown-menu{
  width: 0.5rem;
  height: 1rem;
  /* box-shadow: 0rem 0rem 0.3rem 0rem  gainsboro; */
  margin-top: 0.7rem;
}
.van-popup.van-popup--top.van-dropdown-item__content {
    width: 1rem;
    margin-top: 0.1rem;
    margin-left: 2.75rem;
}
.van-dropdown-item--down{
  bottom: 0.79rem;
}
a{
  color: grey;
}
.router-link-active{
  color: black;
  
}
</style>